<template>

  <div class="Quest">
  <h1>我的题目</h1>
    <div class="icon">
      <el-tooltip class="item" effect="light" content="添加题目" placement="top">
        <el-button :plain="true" size="small" @click="dialogFormVisible = true">添加</el-button>
      </el-tooltip>
    </div>
    <div class="dialog">
    <el-dialog  :visible.sync="dialogFormVisible">
      <div class="tit"><h1>添加题目</h1></div>

      <el-form :model="form" ref="form" label-position="top" label-width="180px" :rules="rule">
        <p>请选择题目类别</p>
        <el-radio v-model="form.type" label="1" size="mini" border>JAVA</el-radio>
        <el-radio v-model="form.type" label="2" size="mini" border>MySQL</el-radio>
        <el-radio v-model="form.type" label="3" size="mini" border>JavaScript</el-radio>
        <p>请选择题目难度</p>
        <el-radio v-model="form.diff" label="1" size="mini" border>基础-初级</el-radio>
        <el-radio v-model="form.diff" label="2" size="mini" border>进阶-中级</el-radio>
        <el-radio v-model="form.diff" label="3" size="mini" border>极难-高级</el-radio>
        <p>请选择答题类型</p>
        <el-tooltip class="item" effect="light" content="单选或多选" placement="top">
          <el-radio v-model="form.style" label="1" @change="formStyle(form.style)" size="mini" border>选择题</el-radio></el-tooltip>
        <el-tooltip class="item" effect="light" content="输出结果题，如 x = 20 << 2 结果为 80" placement="top">
          <el-radio v-model="form.style" label="2" @change="formStyle(form.style)" size="mini" border>结果题</el-radio></el-tooltip>
        <el-tooltip class="item" effect="light" content="问答题没有标准答案，只有推荐答案" placement="top">
          <el-radio v-model="form.style" label="3" @change="formStyle(form.style)" size="mini" border>问答题</el-radio></el-tooltip>
        <el-form-item >
          <p></p>
          <el-switch v-model="form.delivery" active-text="是否公开" ></el-switch>
        </el-form-item>
        <el-form-item label="题目简介" prop="explain">
          <el-input  v-model="form.explain" type="textarea"
                    :rows="3"
                    placeholder="请输入题目简要介绍"></el-input>
        </el-form-item>
        <el-form-item label="题目" prop="content" >
          <quill-editor
            v-model="form.content"
            ref="myQuillEditor"
            :options="quillOption"
            >
          </quill-editor>
        </el-form-item>
        <el-form-item
          v-if="formStyleVisible1"
          v-for="(choice, index) in form.choices"
          :label="'答案' + checkIndex(index)"
          :key="choice.key"
          :prop="'choices.' + index + '.value'"
          :rules="{ required: true, message: '答案不能为空', trigger: 'blur' }"
        >
          <el-input v-model="choice.value" style="width: 85%"></el-input><el-button @click.prevent="removeDomain(choice)">删除</el-button>
        </el-form-item>
        <div class="addAnswer"><el-form-item><el-button  @click="addDomain">增加答案</el-button></el-form-item></div>
        <el-form-item>
          <el-form-item label="正确答案" v-if="formStyleVisible1" prop="selectValue">
            <el-select v-model="form.choicesAnswer" multiple placeholder="请选择正确答案">
              <el-option v-for="(item, index) in form.choices"
              :key="item.label"
              :label="checkIndex(index)"
              :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结果题答案" prop="answera"  v-if="formStyleVisible2">
            <el-input  v-model="form.answera" type="textarea"
                       :rows="3"
                       placeholder="请输入结果题答案"></el-input>
          </el-form-item>
          <el-form-item label="问答题答案" v-if="formStyleVisible3" prop="answerb">
            <el-input  v-model="form.answerb" type="textarea"
                       :rows="3"
                       placeholder="请输入问答题答案"></el-input>
          </el-form-item>
        <el-button @click="dialogFormVisible = false">取 消</el-button>&nbsp
        <el-button type="primary" @click="toAdd">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
  <el-table
    :data="tableData"
    style="width: 100%" :show-header="false">
    <!--:show-header="false"-->

    <el-table-column
      prop="explain"
      label="问题"
      width="650">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="count"
      label="回答次数"
      width="80">
    </el-table-column>
    <el-button>删除</el-button>
  </el-table>
  </div>
</template>

<script>
  import quillConfig from '@/utils/quill-config'
  export default {
    name: "User",
    data() {
      return {
        tableData: [{
          explain: 'java问题',
          count: 0,
          type:1
        }, {
          explain: 'java问题',
          count: 1,
          type:2
        }],
        dialogFormVisible: false,
        formStyleVisible1:true,
        formStyleVisible2:false,
        formStyleVisible3:false,
        form: {
          type:'1',
          diff:'1',
          style:'1',
          delivery:true,
          explain: '',
          name: '',
          choices: [{
            value: '',
            label:'A'
          }],
          abc:'',
          choicesAnswer:'',
          content: '<h2>这里编辑内容</h2>',
          answera:'',
          answerb:''
        },
        radio: '1',
        diff: '1',
        quillOption: quillConfig,
        rule: {
          explain: [
            {
              required: true,
              message: '题目简介是必须的！',
              trigger: 'blur'
            }
          ],
          content: [
            {
              required: true,
              message: '内容是必须的！',
              trigger: 'blur'
            }
          ],
          choicesAnswer: [
            {
              required: true,
              message: '正确答案必须选择！',
              trigger: 'blur'
            }
          ],
          answera: [
            {
              required: true,
              message: '答案是必须的！',
              trigger: 'blur'
            }
          ],
          answerb: [
            {
              required: true,
              message: '答案是必须的！',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    methods: {
      removeDomain(item) {
        let index = this.form.choices.indexOf(item)
        if (index !== -1) {
          this.form.choices.splice(index, 1)
        }
      },
      checkIndex(index){
        let abc = '';
        switch (index) {
          case 0:
            abc='A';
            break;
          case 1:
            abc='B';
            break;
          case 2:
            abc='C';
            break;
          case 3:
            abc='D';
            break;
          case 4:
            abc='E';
            break;
          case 5:
            abc='F';
            break;
        };
        return abc;
      },
      addDomain() {
        let length = this.form.choices.length;
        if(length>5){
          alert("最多允许添加6个备选答案！");
          return ;
        };
        console.log(length)
        let la = this.checkIndex(length);
        this.form.choices.push({
          label:la,
          value: '',
          // key: Date.now()
        });
        this.rule.push({

        })
      },
      toAdd(){
        this.$refs.form.validate(valid => {
          if (valid) {
            this.dialogFormVisible = false;
            let params = Object.assign({}, this.form);
            for(let i = 0; i < params.choices.length; i++){
              console.log(params.choices[i].value)
            }
            console.log(params.choices[0].value);
          }
        })
      },
      formStyle(data){
        console.log(data);
        if(data=='1'){
          this.formStyleVisible1 = true;
          this.formStyleVisible2 = false;
          this.formStyleVisible3 = false;
        } else if (data=='2') {
          this.formStyleVisible1 = false;
          this.formStyleVisible2 = true;
          this.formStyleVisible3 = false;
        }else if (data=='3') {
          this.formStyleVisible1 = false;
          this.formStyleVisible2 = false;
          this.formStyleVisible3 = true;
        }
      }
      }
  }
</script>

<style scoped lang="scss">
  .Quest{
  }
  .icon {
    padding: 10px;
    font-size: 30px;
    float: right;
  }
  .document-aside {
    height: 500px;
    margin-top: 10px;
  }
  .el-button {
    float: right;
  }
.dialog{
  text-align: left;
  margin: 20px auto;
}
  .tit {
    text-align: center;
  }
  .addAnswer {

  }
</style>
